<template>
    <div class="app">
        <merchantHeader/>
        <div class="back">
            <div class="con">
              <div class="pxes"></div>
              <div class="listneo">
                <businessL/>
                <div class="datare">
                    <div class="ra">退款进度</div>
                    <el-steps simple style="margin-top: 35px;" :active="active" finish-status="success">
                        <el-step title="1 买家申请退货退款" @click.native="ruku1(1)"></el-step>
                        <el-step title="2 卖家处理退货退款" @click.native="ruku1(2)"></el-step>
                        <el-step title="3 买家退货" @click.native="ruku1(3)"></el-step>
                        <el-step title="4 退款完毕" @click.native="ruku1(4)"></el-step>
                    </el-steps>
                    <!-- 第一块 -->
                    <div v-if="active === 1">
                        <div class="ltkbox">
                            <div style="font-size: 20px;">选择退款方式：</div>
                            <div>
                                <el-checkbox>仅退款</el-checkbox>
                                <span class="ltkbspan">（没收到快递,或与卖家协商同意不用退货自退款）</span>
                            </div>
                            <div>
                                <span>货物状态：</span>
                                <el-checkbox>未收到货</el-checkbox>
                                <el-checkbox>已收到货</el-checkbox>
                            </div>
                            <div>
                                <span>退款原因：</span>
                                <el-select v-model="value" placeholder="请选择">
                                    <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <div class="ltkbox_b">
                                <el-checkbox>退货退款</el-checkbox>
                                <span class="ltkbspan">（已收到货,需要退还已收到货）</span>
                            </div>
                            <div>
                                <span>退款原因：</span>
                                <el-select v-model="value" placeholder="请选择">
                                    <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <el-button type="danger" style="display:block;margin:0 auto">下一步</el-button>
                        </div>
                    </div>
                    <div v-if="active === 2">
                        <div class="ltkbox">
                            <div>请耐心等待买家处理退货申请。</div>
                            <p>退款申请时间：<span>{{twotime}}</span></p>
                            <div>退货总金额：<span>￥{{jine}}</span></div>
                            <el-button>撤销申请</el-button>
                            <el-button>修改申请</el-button>
                            <div>备注：（情形3）</div>
                            <div>卖家不同意,请填写退货信息</div>
                            <p>信息处理时间：<span>{{twotime}}</span></p>
                            <div>退货总金额：<span>￥{{jine}}</span></div>
                            <div><span>修改退货信息</span><span></span></div>
                        </div>
                    </div>
                    <div v-if="active === 3">
                        <div class="ltkbox">
                            <div>卖家已同意退货退款，请填写退货信息</div>
                            <p>信息处理时间：<span>{{twotime}}</span></p>
                            <div>退货总金额：<span>￥{{jine}}</span></div>
                            <el-form ref="form" label-width="80px">
                                <el-form-item label="快递公司">
                                    <el-select v-model="value" placeholder="请选择">
                                        <el-option
                                        v-for="item in shus"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="退货单号" style="width:297px">
                                    <el-input v-model="danha"></el-input>
                                </el-form-item>
                            </el-form>
                            <el-button type="danger">提交</el-button>
                        </div>
                    </div>

                    <div v-if="active === 4">
                        <div class="ltkbox">
                            <div>退款成功！商家已将退款退还至原支付账户，请注意查收，谢谢！</div>
                            <p>退款成功时间：<span>{{twotime}}</span></p>
                            <div>
                                <span>退款总金额：</span>
                                <span>{{jine}}</span>
                            </div>
                        </div>
                    </div>
                    
                 
           
                </div>
              </div>
              <businessF/>
            </div>
        </div>
        <Footer/>
    </div>
</template>
<script>
import merchantHeader from '@/components/merchantHeader'
import Footer from '@/components/Footer'
import businessL from '@/components/businessL'
import businessF from '@/components/businessF'
export default {
    components: {
    merchantHeader,
    Footer,
    businessL,
    businessF
    },
    data() {
      return {
          active:1,
          shus:[{
            value: '选项1',
            label: '顺丰'
          }],
          danha:11111111111111,
          options: [{
          value: '选项1',
          label: '七天无理由退款'
        }, {
          value: '选项2',
          label: '不喜欢'
        }, {
          value: '选项3',
          label: '太大了'
        }],
        value: '',
        twotime:"2018-12-18 16:22:28",
        jine:"360.00"
      }
    },
    methods: {
      ruku1(ax){
          this.active=ax
      }
    },
}
</script>
<style scoped>
.app  /deep/  .ist_l .ist_c li:nth-child(2) {
    background-color: #ff9381;
    width: 126px;
    height: 50px;
    display: block;
}
.app  /deep/ .el-textarea {
  width: 290px;
}
.demo-ruleForm {
  margin-top: 20px;
}
.flex_lr {
  display: flex;
  justify-content: space-between;
}
.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.back {
    background-color: #f06048
}
.pxes {
  height: 15px;
}
.back .con {
  width: 1200px;
  margin: 0 auto;
  background-color: #eee
}
.listneo {
  width: 1161px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
}
.datare {
  width: 902px;
  border-radius: 6px;
  background-color: #fff
}
.datare .ra {
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 43px;
  margin-left: 14px;
  position: relative;
  top: 15px;
  width: 192px;
	height: 43px;
	background-color: #f06048;
	box-shadow: 0px 4px 2px 0px
		rgba(70, 23, 15, 0.38);
	border-radius: 0px 0px 20px 20px;
}
.ltkbox{
    width: 90%;
    margin:20px auto;
}
.ltkbspan{
    color: rgb(180,180,180);
}
.ltkbox>div{
    margin: 10px 0px;
}
</style>